<template>
    <div>
        <h2>第一个vue3.0页面</h2>
        <div>
            <p>姓名：{{userName}}</p>
        </div>
    </div>
    <div>
        <p>学生信息</p>
        <p>姓名：{{student.name}}</p>
        <p>性别：{{student.gender==true?"男":"女"}}</p>
        <p>年龄：{{student.age}}</p>
        <p>手机号：{{student.Phone}}</p>
    </div>
    <h2>购买的商品列表</h2>
    <table class="table table-bordered text-center">
        <tbody>
            <tr class="bg-primary">
                <td>id</td>
                <td>商品名字</td>
                <td>价格</td>
                <td>数量</td>
            </tr>
            <tr v-for="item in goodsList">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.count}}</td>
            </tr>
        </tbody>
    </table>
    <h2>省份</h2>
    <select>
        <option value="">请选择</option>
        <option v-for="item in provinceList" :value="item.id">{{item.PName}}</option>
    </select>
</template>

<script setup lang="ts">
//引入组件
import {ref,reactive,onMounted} from 'vue'
import "bootstrap/dist/css/bootstrap.min.css"
//变量
const userName=ref("张三")
//学生信息
const student=ref({
    name:"李四",
    gender: false,
    age:22,
    Phone:"13988776528"

})

//商品列表
const goodsList=ref([
    {
        id:1,
        name:"可口可乐",
    price:5.5,
    count:2
    },
    {
        id:2,
        name:"面包",
    price:6,
    count:3
    },
    {
        id:3,
        name:"双汇火腿肠",
    price:3.5,
    count:4
    },
])


const provinceList=ref([
    {
        id:1,
        PName:"北京市"
    },
    {
        id:1,
        PName:"天津市"
    },
    {
        id:1,
        PName:"河北市"
    },
    {
        id:1,
        PName:"辽宁省"
    }
])

</script>

<style scoped>

</style>